import React, { PureComponent } from 'react';
import { Row, Col, Icon } from 'antd';
import { DragSource, DragPreviewImage } from 'react-dnd';
import { ItemTypes } from '../Common';

import styles from './index.less';

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1179451_qwqra5afs78.js',
});

class Item extends PureComponent {
  render() {
    const { data, connectDragSource, connectDragPreview, isDragging, onItemClick } = this.props;
    const { img, name, icon } = data;
    const opacity = isDragging ? 0.4 : 1;
    return connectDragSource(
      <div>
        <DragPreviewImage connect={connectDragPreview} src={img} />
        <Row className={styles.row} style={{ opacity }} onClick={() => onItemClick(data)}>
          <Col span={6} className={styles.iconCol}>
            <MyIcon type={icon} className={styles.icon} />
          </Col>
          <Col span={18}>
            <p>
              <strong>{name}</strong>
              <br />
              拖拽或点击添加{name}
            </p>
          </Col>
        </Row>
      </div>
    );
  }
}

export default DragSource(
  ItemTypes.Item,
  {
    beginDrag: props => ({ ...props.data }),
  },
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  })
)(Item);
